<template>
  <div class="taskDetail">
    <div style="flex: 1">
      <el-card shadow="never" style="height: 100vh">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
          <n-title :title="taskName"/>
          <div>
            <el-button size="small" plain type="warning" v-if="taskState=='0'" disabled>待质检</el-button>
            <el-button size="small" plain type="primary" v-if="taskState=='1'" disabled>质检中</el-button>
            <el-button size="small" plain type="success" v-if="taskState=='2'" disabled>已质检</el-button>
            <el-button size="small" plain type="primary">规则</el-button>
            <el-button size="small" plain type="primary" @click="toTaskIndex">返回任务列表</el-button>
            <el-button size="small" plain type="primary" @click="startInspect">开启质检</el-button>
          </div>
        </div>
        <div class="ha-top-t" >
          <div>
            <el-tabs tab-position="left" v-model="taskInfoTab">
              <el-tab-pane label="总体情况" name="taskInfoTab">
                <inspect-task-info :taskId="taskId"/>
              </el-tab-pane>
              <el-tab-pane
                  v-for="(item) in inspectResultList"
                  :key="item.inspectResultId"
                  :label="item.title"
                  :name="item.title"
                  lazy="lazy"
              >
              <inspect-result-info :result-id="item.inspectResultId"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import InspectTaskInfo from "@/views/quality/inspect/InspectTaskInfo.vue"
import InspectResultInfo from "@/views/quality/inspect/InspectResultInfo.vue"
import {
  queryTaskInspectTimes,
  startTaskInspect,
} from '@/api/inspectTask';
import router from "@/router";

@Component({
  methods: {queryTaskInspectTimes, startTaskInspect},
  components: {NTitle, DataTable,InspectTaskInfo,InspectResultInfo }
})
export default class dataUpdate extends Vue {
  taskName : any = router.currentRoute.query.taskName;
  taskId : any = router.currentRoute.query.taskId;
  taskState : any = router.currentRoute.query.taskState;
  public inspectResultList : any = [];
  taskInfoTab = "taskInfoTab"
  //查询质检次数列表
  queryInspectTimes(){
    queryTaskInspectTimes({taskId: this.taskId}).then(res =>{
      if (res) {
        this.inspectResultList = res.data.sort((a, b) => b.rank - a.rank)
      }
    });
  }
  //开启质检
  startInspect() {
    startTaskInspect({id: this.taskId}).then(res => {
      if (res) {
        console.log("质检成功")
        this.queryInspectTimes();
      } else {
        console.log("质检失败")
      }
    })
  }
  activated() {
    this.taskId = router.currentRoute.query.taskId;
    this.taskName =router.currentRoute.query.taskName;
    this.queryInspectTimes();
  }
  toTaskIndex(){
    this.$router.push({ path: '/quality/dataInspect'});
  }
}
</script>
<style lang="scss" scoped>
.taskDetail {
  display: flex;
  gap: 10px;
  height: 100%;
  .ha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
